<template>
  <div class="setting">
    <header>管理</header>
    <section>
      <dl class="father" v-for="item in list" :key="item">
        <dt class="father_dt">{{ item.title }}</dt>
        <dd class="father_dd">
          <dl
            v-for="childItem in item.child"
            @click="iconFn(childItem)"
            :key="childItem"
          >
            <dt><van-icon :name="childItem.icon" /></dt>
            <dd>{{ childItem.title }}</dd>
          </dl>
        </dd>
      </dl>
    </section>
    <tabbar />
  </div>
</template>

<script setup>
import tabbar from "../../common/tabber.vue";
import { reactive } from "vue";
import { useRouter } from "vue-router";
const list = reactive([
  {
    id: 0,
    title: "我的",
    child: [
      { id: 0, title: "我的订单", icon: "description", path: "my_order" },
      { id: 1, title: "我的客户", icon: "peer-pay", path: "my_client" },
    ],
  },
  {
    id: 1,
    title: "团队",
    child: [
      { id: 0, title: "团队订单", icon: "points", path: "team_order" },
      { id: 1, title: "团队客户", icon: "user-circle-o", path: "team_client" },
    ],
  },
  {
    id: 2,
    title: "审批",
    child: [
      { id: 4, title: "订单初审", icon: "sign", path: "order_first" },
      { id: 5, title: "订单复审", icon: "completed", path: "order_recheck" },
      { id: 6, title: "入职审批", icon: "records", path: "entry" },
      { id: 7, title: "OA管理", icon: "contact", path: "oa_set" },
    ],
  },
  {
    id: 3,
    title: "公司",
    child: [
      { id: 8, title: "员工", icon: "friends-o", path: "employee" },
      { id: 9, title: "部门", icon: "smile-o", path: "department" },
      { id: 10, title: "饼图统计", icon: "clock-o", path: "pie_img" },
      { id: 11, title: "折线统计", icon: "chart-trending-o", path: "line_img" },
      { id: 12, title: "开票信息", icon: "coupon-o", path: "make_msg" },
    ],
  },
]);

const router = useRouter();
// 点击对应icon跳转对应路由
function iconFn(v) {
  router.push(v.path);
}
</script>

<style scoped>
.setting {
  width: 100vw;
  height: 100vh;
}
header {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
  color: white;
  position: fixed;
  top: 0;
  z-index: 999;
}
.father_dd {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.father_dd dl dt {
  width: 4rem;
  height: 4rem;
}
.father_dd dl i {
  border-radius: 50%;
  font-size: 2rem;
  background: cyan;
  padding: 0.5rem;
}
.father_dd dl {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.father_dd dl dd {
  white-space: nowrap;
  text-align: center;
  margin: 0;
  padding: 0;
}
.father {
  display: flex;
  flex-direction: column;
  background: white;
  width: 95%;
  box-sizing: border-box;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background: rgb(244, 244, 244);
  width: 100%;
  height: 100%;
}
</style>
